<template>
  <div 
    ref="floatingButton"
    class="ai-floating-button"
    :style="buttonStyle"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <!-- 圆形按钮 -->
    <div class="button-circle" @click="navigateToAIAssistant">
      <el-icon class="ai-icon">
        <ChatDotRound />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ChatDotRound } from '@element-plus/icons-vue'

const router = useRouter()
const floatingButton = ref<HTMLElement>()

// 按钮位置 - 固定在右下角
const position = ref({ x: window.innerWidth - 80, y: window.innerHeight - 80 })
const isDragging = ref(false)
const dragOffset = ref({ x: 0, y: 0 })

const buttonStyle = ref({
  right: '20px',
  bottom: '20px'
})

// 开始拖动
const startDrag = (event: MouseEvent | TouchEvent) => {
  isDragging.value = true
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
  
  dragOffset.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y
  }
  
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('touchmove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('touchend', stopDrag)
}

// 拖动中
const onDrag = (event: MouseEvent | TouchEvent) => {
  if (!isDragging.value) return
  
  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
  
  const newX = clientX - dragOffset.value.x
  const newY = clientY - dragOffset.value.y
  
  // 限制在窗口范围内
  const maxX = window.innerWidth - 60
  const maxY = window.innerHeight - 60
  
  position.value = {
    x: Math.max(0, Math.min(newX, maxX)),
    y: Math.max(0, Math.min(newY, maxY))
  }
  
  updateButtonStyle()
}

// 停止拖动
const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('touchmove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  document.removeEventListener('touchend', stopDrag)
}

// 更新按钮样式
const updateButtonStyle = () => {
  buttonStyle.value = {
    right: '20px',
    bottom: '20px'
  }
}

// 跳转到AI助手页面
const navigateToAIAssistant = () => {
  router.push('/ai-assistant')
}

// 监听窗口大小变化
const handleResize = () => {
  // 按钮固定在右下角，不需要调整位置
  updateButtonStyle()
}

onMounted(() => {
  updateButtonStyle()
  window.addEventListener('resize', handleResize)
})
</script>

<style scoped>
.ai-floating-button {
  position: fixed;
  z-index: 9999;
  transition: all 0.3s ease;
}

.button-circle {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.button-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button-circle:hover {
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5);
}

.button-circle:hover::before {
  opacity: 1;
}

.button-circle:active {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.ai-icon {
  font-size: 26px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

.button-circle:hover .ai-icon {
  transform: rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 脉冲动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.6);
  }
  100% {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  }
}

.button-circle {
  animation: pulse 3s ease-in-out infinite;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .button-circle {
    width: 55px;
    height: 55px;
  }
  
  .ai-icon {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .button-circle {
    width: 50px;
    height: 50px;
  }
  
  .ai-icon {
    font-size: 20px;
  }
}
</style>
